
<div class="container" ng-controller="checkinExceptionCtrl">


    <div class="panel" style="margin-top: 50px">
        <div class="panel-body">
            <!-- 多条件查询 -->
            <div class="form-inline">
                <div class="form-group">
                    <label for="keyword">关键字:</label>
                    <input type="text" id="keyword" class="form-control input-sm" ng-model="keyword">
                </div>

                <div class="form-group">
                    <label for="start_datetime">开始时间:</label>
                    <input id='start_datetime' class="form-control input-sm"
                           data-date-format="yyyy-mm-dd hh:ii:ss" type="text"/>
                </div>
                <div class="form-group">
                    <label for="end_datetime">结束时间:</label>
                    <input id='end_datetime' class="form-control input-sm"
                           data-date-format="yyyy-mm-dd hh:ii:ss" type="text"/>
                </div>
                <div class="form-group">
                    <label for="shipName">选择船舶:</label>
                    <select id='shipName' class="form-control" ng-model="selectedShip"
                            ng-options="item.mmsi as item.name for item in shipData">
                    </select>
                </div>
                <button type="button" class="btn btn-sm btn-primary" ng-click="queryByCondition()">
                    查询
                </button>
            </div>

            <hr/>

            <!-- 表格 -->
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th>船名</th>
                        <th>时间</th>
                        <th>code</th>
                        <th>详情</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="item in redata | filter:keyword">
                        <td>{{item.shipName}}</td>
                        <td>{{item.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td>{{item.code}}</td>
                        <td>{{formatMsg(item.msg)}}
                            <button ng-if='item.msg.length > 5' class="btn btn-default btn-sm"
                                    href="#" data-toggle="modal" data-target="#detailModal"
                                    ng-click="detailModal(item)">查看详情
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel-footer">
                <div style="width: auto;display: table;margin-left: auto;margin-right: auto;">
                    <button class="btn btn-primary" ng-hide="redata.length >= totalElements && redata.length != 0"
                            ng-click="queryMore()">
                        查看更多
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 详情弹出框 -->
    <div id='detailModal' class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <!--<h4 class="modal-title">Modal title</h4>-->
                </div>
                <div class="modal-body">
                    <p>{{modalContent}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>
